import React, { ReactElement } from 'react'
import { Form, Input, Button, Checkbox, Select } from 'antd';

interface Props {
    handleCancel(ref: any): void
    name: { name: string; rulesMsg: string; id: string, value: string }[]
    typeName: string
    /*
1.接一个回调模态框布尔值 默认框都是必选 会返回一个得到的值
2.接一个数组，有多少个数组就有多少个input框，数组里面应该为对应添加对象 {name:"password",rulesMsg:"请输入你的密码"}
*/
}


export default function MyBannerFrom({ handleCancel, name, typeName }: Props): ReactElement {
    //回调成功
    const onFinish = (e: any) => {
        handleCancel(e)
    }
    return (
        <Form
            name="normal_login"
            className="login-form"
            onFinish={onFinish}

        >
            {
                name.map(item => {
                    return (
                        <Form.Item
                            key={item.id}
                            name={item.id}
                            label={item.name}
                            initialValue={item.value}
                            rules={
                                [
                                    {
                                        required: true,
                                        message: item.rulesMsg,
                                    },
                                ]
                            }
                            hasFeedback
                        >
                            <Input placeholder={item.rulesMsg} />
                        </Form.Item>
                    )
                })
            }
            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: "100%" }}>
                    确认{typeName}
                </Button>
            </Form.Item>
        </Form>
    )
}
